<%

/*
 * Copyright 2006 Brian Watkins
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

%>
<%@ page import="bw.theme.*" %>
<%
    ThemeManager theme = ThemeManager.getInstance();
%>

<html>
<head>
<title>calendar!</title>
<link rel=STYLESHEET type="text/css" href="style.jsp">
<link rel="SHORTCUT ICON" href="images/favicon.ico">
<!-- yahoo stuff -->
<script type="text/javascript" src="include/yui_2.6/yahoo-dom-event.js"></script>
<script type="text/javascript" src="include/yui_2.6/connection-min.js"></script>
<script src="include/animation.js"></script>
<script type="text/javascript" src="include/yui_2.6/element-beta-min.js"></script>  
<!-- end yahoo stuff -->
<script>
var button_lowColor = "<%= theme.getColor( "fgcolor" ) %>";
var button_medColor = "<%= theme.getColor( "buttonMed" ) %>";
var button_highColor = "<%= theme.getColor( "buttonHigh" ) %>";
</script>
<script src="include/buttons.js"></script>
<script src="include/ajax.js"></script>
<script src="include/tooltip.js"></script>
<script>
var noteManagerId = 'agenda';

function formatDate ( year, month, date, time )
{
  return getMonth( month ) + " " + date + ", " + year;
}

</script>

<!-- tooltip css -->

<style>

#tt {
 position:absolute;
 display:block;
 background:#000000; 
 }
#tttop {
 display:none;
 height:5px;
 margin-left:5px;
 background:#FFCC33
 overflow:hidden;
 }
#ttcont {
 display:block;
 position:relative;
 left:-2px; top:-2px; 
 padding:5px 10px 0px 10px;
 background:#FFCC33;
 border:1px solid #000000; 
 }
#ttbot {
display:none;
height:5px;
margin-left:5px;
background:#000000;
}

#ttcont P { margin:0px; padding:0px 0px 5px 0px; color:#000000; }

</style>

<!-- end tooltip css -->

</head>

<body>

<center>

<div id="cm" class="calMain">

<div class="calButtonHolder">

<div class="calButton">
<canvas id="upButton" width="15" height="15" onMouseOver="drawUp( 'upButton', true )" onMouseOut="drawUp( 'upButton', false )" onClick="getCalendars( 'previous' )">
No Canvas!
</convas>
</div>

<div class="calButton">
<canvas id="downButton" height="15" width="15" onMouseOver="drawDown( 'downButton', true )" onMouseOut="drawDown( 'downButton', false )" onClick="getCalendars( 'next' )">
No Canvas!
</canvas>
</div>

</div>

<div id="calendars"></div>

<div class="agenda">

<div id="agendaItemForm" class="agendaItemForm">
<div class="agendaTitle">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td id='agendaItemFormTitle'>&nbsp;</td><td align="right">&nbsp;</td></tr>
</table>
</div>
<form id="eventForm" onSubmit="return false;">
<div class="agendaItemFormRow">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
Event Type<br>
<select class="agendaFormSelect" name="eventType">
  <option value="1">Date Event</option>
  <option value="2">Weekly Event</option>
  <option value="3">Yearly Event</option>
</select>
</td>
<td style="padding-left:10px;">
Start Time<br>
<input type="text" name="eventStart" class="agendaFormTimeField">
</td>
<td width="100%" style="padding-left:10px;">
End Time<br>
<input type="text" name="eventEnd" class="agendaFormTimeField">
</td>
</tr>
</table>
</div>
<div class="agendaItemFormRow">
Description<br>
<input type="text" name="eventDesc" class="agendaFormField">
</div>
<div class="agendaItemFormRow">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="addFormButton"><a href="javascript:submitAgendaItemForm()" class="submitNewsLink">Save Event</a></td>
<td align="right" class="addFormButton"><a href="javascript:closeAgendaItemForm()" class="submitNewsLink">Cancel</a></td>
</tr>
</table>
</div>
<input type="hidden" name="eventDate" value="">
<input type="hidden" name="eventId" value="">
</form>
</div>

<div id="agendaHolder" class="agendaItemsHolder">
  <div id="agendaItems" class="agendaItems">
  </div>
</div>

</div>

</div>

</center>

<jsp:include page="nav.html" />

</body>

<script>

function getCalendars ( act )
{
  var num = 2;
  var surl = 'cal?action=' + act + '&number=' + num;

  var callback = 
  {
    success : handleCalRequest,
    failure : handleFailure
  };

  YAHOO.util.Connect.asyncRequest( 'GET', surl, callback );
}

function handleCalRequest ( obj )
{
  var doc = obj.responseXML;

  //erase the calendars
  var calDiv = document.getElementById( "calendars" );
  if ( calDiv && calDiv.hasChildNodes && calDiv.removeChild ) {
    while ( calDiv.hasChildNodes() ) {
      calDiv.removeChild( calDiv.firstChild );
    }
  }

  var calendars = doc.getElementsByTagName( "calendar" );

  for ( var i = 0; i < calendars.length; i++ ) {
    var title = calendars.item( i ).getAttribute( "title" );
    var length = calendars.item( i ).getAttribute( "length" );
    var start = calendars.item( i ).getAttribute( "start" );
    var curDate = calendars.item( i ).getAttribute( "current" );
    var month = calendars.item( i ).getAttribute( "month" );
    var year = calendars.item( i ).getAttribute( "year" );
	 
    var cal = makeCalendar( calendars.item( i ), title, month, year, length, start, curDate );
    calDiv.appendChild( cal );
  }

  //select the current dates
  for ( var x = 0; x < _currentDates.length; x++ ) {
    var d = document.getElementById( _currentDates[x] );
    if ( d ) {
      var dcl = d.getAttribute( "class" );
      if ( dcl.indexOf( "evtCell" ) == -1 && dcl.indexOf( "curDate" ) == -1 ) {
        d.setAttribute( "style", "background:#294766;" );
      }
    }
  }
}

function makeCalendar ( calNode, title, month, year, length, start, curDate )
{
  var cal = document.createElement( "div" );
  cal.setAttribute( "id", "calendar" );
  
  var t = document.createElement( "div" );
  t.setAttribute( "class", "title" );
  t.appendChild( document.createTextNode( title ) );

  cal.appendChild( t );

  for ( var i = 0; i < start; i++ ) {
    cal.appendChild( makeDate( '', month, year, false, false ) );
  }
  
  var dow = start;
  var dom = 1;

  var end = new Number( length ) + 1;
  while ( dom < end ) {
    cal.appendChild( makeDate( dom, month, year, ( dow++ % 7 == 0 ), ( curDate == dom ) ) );
    dom++;
  } 

  for ( var i = dow; i % 7 != 0; i++ ) {
    cal.appendChild( makeDate( '', month, year, false, false ) );
  }

  //add a last row to get the bottom border
  for ( var i = 0; i < 7; i++ ) {
    cal.appendChild( makeDate( '', month, year, ( i == 0 ), false ) );
  }

  var days = cal.childNodes;
  var evts = calNode.getElementsByTagName( "event" );

  if ( evts.length > 0 ) {
    for ( var i = 0; i < days.length; i++ ) {
      var evtMsg = '';
      for ( var x = 0; x < evts.length; x++ ) { 
        if ( days.item( i ).getAttribute( "id" ) == month + "_" + evts.item( x ).getAttribute( "date" ) ) {
	  evtMsg += "<p>" + evts.item( x ).getAttribute( "desc" ) + "</p>";
        }
      }
      if ( evtMsg != '' ) {
        days.item( i ).setAttribute( "class", days.item( i ).getAttribute( "class" ) + " evtCell" );
	days.item( i ).setAttribute( "onmouseover", "dateHover( this, true ); tooltip.show('" + evtMsg.replace( /'/g, "\\'" ) + "');" );
	days.item( i ).setAttribute( "onmouseout", "dateHover( this, false ); tooltip.hide();" );
      }
    }
  }

  return cal;
}

function makeDate ( d, month, year, isSun, isCurDate ) 
{
  var s = document.createElement( "span" );

  s.setAttribute( "id", month + "_" + d );

  var styleClass = '';
  if ( d != '' ) {
    styleClass = 'datecell';
  }
  if ( isSun ) {
    styleClass += " sun";
  }
  if ( isCurDate ) {
    styleClass += " curDate";
  }
  s.setAttribute( "class", styleClass );

  if ( d != '' ) {
    s.setAttribute( "onMouseOver", "dateHover( this, true )" );
    s.setAttribute( "onMouseOut", "dateHover( this, false )" );
    s.setAttribute( "onClick", "selectDate( event, this, '" + year + "', '" + month + "', '" + d + "' )" );  
  }

  if ( d != '' ) {
    s.appendChild( document.createTextNode( d ) );
  }

  return s;
}

function dateHover ( me, hovering )
{
  var d_el = new YAHOO.util.Element( me );
  if ( hovering ) {
    //d_el.setStyle( "text-decoration", "underline" );
  } else {
    //d_el.setStyle( "text-decoration", "none" );
  }
}

var init = false;

var _currentDates = [];

function selectDate ( evt, tdiv, year, month, date )
{
  var openAgendaItemForm = false;
  if ( evt.metaKey ) { 
    openAgendaItemForm = true;
  }

  //clear the background -- messy but seems like the only way
  //var sps = document.getElementById( "calendars" ).getElementsByTagName( "SPAN" );
  //for ( var x = 0; x < sps.length; x++ ) {
  //  if ( sps.item( x ).getAttribute( "style" ) == "background:#294766;" ) {
  //    sps.item( x ).setAttribute( "style", "" );
  //  }
  //}

  //clear the current dates
  for ( var x = 0; x < _currentDates.length; x++ ) {
    var d = document.getElementById( _currentDates[x] );
    if ( d ) {
      d.setAttribute( "style", "" );
    }
  }

  //tdiv.setAttribute( "style", "background:#294766;" );

  var realMonth = month*1 + 1;

  getEventsForDate( year + "-" + realMonth + "-" + date, openAgendaItemForm );
}

function openAgendaItemForm ( cd )
{
  var f = document.forms.eventForm;
  f.eventType.selectedIndex = 0;
  f.eventStart.value = '';
  f.eventEnd.value = '';
  f.eventDesc.value = '';
  f.eventId.value ='';
  f.eventDate.value = cd.getAttribute( "cdId" );

  var name = cd.getAttribute( "cdName" );
  var title = document.getElementById( "agendaItemFormTitle" );
  title.replaceChild( document.createTextNode( name ), title.firstChild );
  
  //document.getElementById( "agendaItems" ).style.visibility = "hidden";
  document.getElementById( "agendaHolder" ).style.display = "none";
  document.getElementById( "agendaItemForm" ).style.visibility = "visible";
}

function closeAgendaItemForm ()
{
  document.getElementById( "agendaHolder" ).style.display = "";
  document.getElementById( "agendaItemForm" ).style.visibility = "hidden";
}

function submitAgendaItemForm ()
{
  var f = document.forms.eventForm;
  var qs = "eventType=" + f.eventType[ f.eventType.selectedIndex ].value;
  qs += "&eventDate=" + escape( f.eventDate.value );
  qs += "&eventStart=" + escape( f.eventStart.value );
  qs += "&eventEnd=" + escape( f.eventEnd.value );
  qs += "&eventDesc=" + escape( f.eventDesc.value );
  qs += "&eventId=" + f.eventId.value;

  var surl = "event?action=saveEvent&" + qs;

  var callback = 
  {
    success : handleEventAction,
    failure : handleFailure
  };

  YAHOO.util.Connect.asyncRequest( 'GET', surl, callback );
}

function getEventsForDate ( calDate, openAgendaItemForm )
{
  var surl = "event?action=getEvents&numDays=7&eventDate=" + calDate;

  var callback = 
  {
    success : parseEventsDoc,
    failure : handleFailure,
    argument : [ openAgendaItemForm ]
  };

  YAHOO.util.Connect.asyncRequest( 'GET', surl, callback );

  document.getElementById( "agendaHolder" ).style.overflow = "hidden";
}

function handleEventAction ( obj )
{
  parseEventsDoc( obj );  

  getCalendars( 'current' );
}

function parseEventsDoc ( obj )
{
  document.getElementById( 'agendaItemForm' ).style.visibility = 'hidden';

  //alert( "success: " + obj.responseText );

  var evts = document.getElementById( "agendaItems" );
  
  //remove all child nodes
  if ( evts && evts.hasChildNodes && evts.removeChild ) {
     while ( evts.hasChildNodes() ) {
       evts.removeChild( evts.firstChild );
     }
  }  

  var cDates = obj.responseXML.getElementsByTagName( "calendarDate" );
  
  for ( var x = 0; x < cDates.length; x++ ) {
    var cdName = cDates.item( x ).getAttribute( "name" );
    var cdId = cDates.item( x ).getAttribute( "id" );

    var title = createDateTitle( cdId, cdName, cDates.item( x ).hasChildNodes() );
    evts.appendChild( title );

    var evtId = 0;
  
    var eventTags = cDates.item( x ).getElementsByTagName( "event" );
    for ( var i = 0; i < eventTags.length; i++ ) {
      var type = eventTags.item( i ).getAttribute( "type" );
      var start = eventTags.item( i ).getAttribute( "start" );
      var end = eventTags.item( i ).getAttribute( "end" );
      var desc = eventTags.item( i ).firstChild.nodeValue;

      //alert( "type: " + type + ", start: " + start + ", end: " + end + ", desc: " + desc );

      var evt = createEvent( evtId++, cdId, type, start, end, desc );
      evts.appendChild( evt );
    }

    //highlight the day on the calendar
    var cmonth = cDates.item( x ).getAttribute( "month" )*1 - 1;
    var cday = cDates.item( x ).getAttribute( "date" );
    _currentDates[ x ] = cmonth + "_" + cday;
    var cal = new YAHOO.util.Element( _currentDates[ x ] );
    if ( cal ) {
      if ( !cal.hasClass( "evtCell" ) && !cal.hasClass( "curDate" ) ) {
        cal.setStyle( "background", "#294766" );
      }
    }
  }

  document.getElementById( "agendaHolder" ).style.overflow = "auto;";
  document.getElementById( "agendaHolder" ).style.display = "";

  if ( obj.argument && obj.argument[0] ) {
   openAgendaItemForm( evts.firstChild );
  }
}

function createDateTitle ( cdId, cdName, hasEvents )
{
    var title = document.createElement( "DIV" );
    title.setAttribute( "class", "agendaTitle" );
    title.setAttribute( "onClick", "openAgendaItemForm( this )" );
    title.setAttribute( "cdId", cdId );
    title.setAttribute( "cdName", cdName );    

    var titleTab = document.createElement( "TABLE" );
    titleTab.setAttribute( "cellpadding", "0" );
    titleTab.setAttribute( "cellspacing", "0" );
    titleTab.setAttribute( "border", "0" );
    titleTab.setAttribute( "width", "100%" );
    
    var titleTabTr = document.createElement( "TR" );
    var titleTabName = document.createElement( "TD" );
    titleTabName.appendChild( document.createTextNode( cdName ) );
    var titleTabButton = document.createElement( "TD" );
    titleTabButton.innerHTML = "&nbsp;";
    titleTabTr.appendChild( titleTabName );
    titleTabTr.appendChild( titleTabButton );

    titleTab.appendChild( titleTabTr );

    title.appendChild( titleTab );

    if ( !hasEvents ) {
      title.style.opacity = ".5";
    }

    return title;
}

function createEvent ( id, calDate, type, start, end, desc )
{
  var evt = document.createElement( "div" );
  evt.setAttribute( "class", "agendaItem" );
  
  var evtHeader = document.createElement( "DIV" );
  evtHeader.setAttribute( "class", "agendaItemHeader" );

  var evtHeaderTab = document.createElement( "TABLE" );
  evtHeaderTab.setAttribute( "cellpadding", "0" );
  evtHeaderTab.setAttribute( "cellspacing", "0" );
  evtHeaderTab.setAttribute( "border", "0" );
  evtHeaderTab.setAttribute( "width", "100%" );

  var evtHeaderTabRow = document.createElement( "TR" );
  
  var timeStr = '';
  if ( start == '12:00am' && end == '12:00am' ) {
    timeStr = 'All Day';
  }
  else {
    timeStr = start + "-" + end;
  }

  var evtTime = document.createElement( "TD" );  
  evtTime.setAttribute( "class", "agendaItemTime" );
  evtTime.appendChild( document.createTextNode( timeStr ) );

  var evtButton = document.createElement( "TD" );
  evtButton.setAttribute( "class", "agendaItemButton" );
  evtButton.innerHTML = "<a href=\"javascript:editEvent( '" + id + "', '" + calDate + "' )\">edit</a> | <a href=\"javascript:deleteEvent( '" + id + "', '" + calDate + "' )\">delete</a>";

  evtHeaderTabRow.appendChild( evtTime );
  evtHeaderTabRow.appendChild( evtButton );
  evtHeaderTab.appendChild( evtHeaderTabRow );
  evtHeader.appendChild( evtHeaderTab );

  var evtDesc = document.createElement( "div" );
  evtDesc.setAttribute( "class", "agendaItemDesc" );
  evtDesc.appendChild( document.createTextNode( desc ) );

  evt.appendChild( evtHeader );
  evt.appendChild( evtDesc );

  return evt;
}

function editEvent ( id, calDate )
{
  //lookup events just gets the events for this date
  var surl = "event?action=lookupEvents&eventDate=" + calDate;

  var callback = 
  {
    success : parseEventsDocForEdit,
    failure : handleFailure,
    argument : id
  };

  YAHOO.util.Connect.asyncRequest( 'GET', surl, callback );
}

function parseEventsDocForEdit ( obj )
{
  var cd = obj.responseXML.getElementsByTagName( "calendarDate" ).item( 0 );
  var eventTags = cd.getElementsByTagName( "event" );

  var evtId = obj.argument;

  var type = eventTags.item( evtId ).getAttribute( "type" );
  var start = eventTags.item( evtId ).getAttribute( "start" );
  var end = eventTags.item( evtId ).getAttribute( "end" );
  var desc = eventTags.item( evtId ).firstChild.nodeValue;

  var f = document.forms.eventForm;
  f.eventType.selectedIndex = ( type - 1 );
  f.eventStart.value = start;
  f.eventEnd.value = end;
  f.eventDesc.value = desc;
  f.eventDate.value = cd.getAttribute( "id" );
  f.eventId.value = evtId;

  var name = cd.getAttribute( "name" );
  var title = document.getElementById( "agendaItemFormTitle" );
  title.replaceChild( document.createTextNode( name ), title.firstChild );

  document.getElementById( "agendaHolder" ).style.display = "none";
  document.getElementById( "agendaItemForm" ).style.visibility = "visible";
}

function deleteEvent ( id, calDate )
{
  var surl = "event?action=deleteEvent&eventId=" + id + "&eventDate=" + calDate;

  var callback = 
  {
    success : handleEventAction,
    failure : handleFailure
  };

  YAHOO.util.Connect.asyncRequest( 'GET', surl, callback );

  document.getElementById( "agendaHolder" ).style.overflow = "hidden";
}

drawUp( 'upButton', false );
drawDown( 'downButton', false );

getCalendars( 'thisMonth' );

getEventsForDate( 'currentDate', false );

</script>

</html>

